<template>
    <div class="e-form">
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <div style="width: 100%" class="form">
                <el-form :model="formData" label-width="170px" :rules="rules" ref="ruleForm">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="招标编号：" prop="billNo">
                                <div style="display: flex">
                                    <el-input v-model="formData.billNo" disabled></el-input>
                                    <ComShowBiddingButton :tenderId="tenderId" />
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="拟招标项目名称：" prop="tenderName">
                                <span>{{ formData.tenderName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="拟招标金额（元）：" prop="tenderAmount">
                                <span>{{ formData.tenderAmount }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="招标方式：" prop="tenderForm">
                                <span>{{ formData.tenderForm | tenderForm(this) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-form-item label="招标项目工程概况：" prop="projectOverview">
                            <el-input
                                type="textarea"
                                :rows="2"
                                v-model="formData.projectOverview"
                                style="margin-right: 110px"
                                disabled
                            >
                            </el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="关闭原因：" prop="closeReason">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="formData.closeReason"
                                style="margin-right: 110px"
                            >
                            </el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col :span="12" style="margin-top: 10px">
                            <el-form-item label="录入机构：" prop="orgName">
                                <!-- 传id和名称 -->
                                <span>{{ formData.orgName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="margin-top: 10px">
                            <el-form-item label="状态：" prop="state">
                                <span>{{ formData.state | state(this) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" style="margin-top: 10px">
                            <el-form-item label="关闭日期" prop="orgName">
                                <el-date-picker
                                    v-model="formData.closeDate"
                                    type="date"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions"
                                    value-format="yyyy-MM-dd"
                                    :clearable="false"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <!-- <span class="tip"
                    ><span style="color: red; margin-right: 0">*</span
                    >为必填项</span
                > -->
            <!-- <el-button
                    type="primary"

                    class="btn-blue"
                    >打印</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >删除</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >发布</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >审核</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >撤回</el-button
                > -->
            <el-button type="primary" class="btn-blue" @click="submit" size="small">保存</el-button>
            <el-button @click="handleClose" size="small">取消</el-button>
        </div>
    </div>
</template>

<script>
// import ComTreeTable from '@/templates/table/treeTable.vue'
// import ComTreeFile from '@/templates/table/treeFile.vue'
// import ComPagination from '@/components/pagination/pagination.vue'
import applyCloseRequest from '@/api/tender/applyClose.js'
import applyRequest from '@/api/tender/apply.js'
import ComShowBiddingButton from '@/pages/bidding/common/showBiddingButton.vue'
import { mapState } from 'vuex'
import { openAppClient } from '@/utils/common'

export default {
    data () {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            value: '',
            textarea: '',
            formData: {
                applyOrgId: '',
                applyOrgName: '',
                baseCurAmount: 0,
                baseCurId: '',
                baseCurName: '',
                baseCurRate: 0,
                bidAmount: 0,
                billId: '',
                billNo: '',
                budgetId: '',
                budgetName: '',
                closeOrgId: '',
                closeOrgName: '',
                closeReason: '',
                currency: '',
                currencyId: '',
                evaluationMethod: 0,
                founderId: '',
                founderName: '',
                freigntTaxAmount: 0,
                freigntTaxRate: 0,
                gmtCreate: '',
                gmtModified: '',
                isCentralize: 0,
                isTenderPlat: 0,
                leaseType: 0,
                nullifyCreated: '',
                nullifyCreator: '',
                nullifyCreatorId: '',
                nullifyDescription: '',
                nullifyReason: '',
                orgId: '',
                orgName: '',
                performanceBond: 0,
                projectId: '',
                projectName: '',
                projectOverview: '',
                relaseTime: '',
                releaseState: 0,
                remarks: '',
                rmbAmount: 0,
                rmbId: '',
                rmbName: '',
                rmbRate: 0,
                state: 0,
                taxAmount: 0,
                taxRate: 0,
                tenderAmount: 0,
                tenderApplyId: '',
                tenderBail: 0,
                tenderDemand: '',
                tenderEndTime: '',
                tenderForm: '',
                tenderFormName: '',
                tenderName: '',
                tenderNotice: '',
                tenderType: 0,
                tenderUser: '',
                tenderUserId: '',
                version: 0,
                workId: '',
                closeDate: ''
            },
            test: '',
            selectData: [],
            selectTableColumnAttr: [
                {
                    label: '单据编号',
                    prop: 'billNo'
                },
                {
                    label: '拟招标项目名称',
                    prop: 'tenderName'
                },
                {
                    label: '单据日期',
                    prop: 'gmtCreate'
                },
                {
                    label: '单据机构名称',
                    prop: 'orgName'
                }
            ],
            selectTableColumnWidth: {
                leftWidth: '150',
                rightWidth: '100'
            },
            selectDataPagination: {},
            rules: {
                billNo: {
                    required: true,
                    message: '请输入招标编号',
                    trigger: 'blur'
                },
                tenderName: {
                    required: true,
                    message: '请输入拟招标项目名称',
                    trigger: 'blur'
                },
                tenderAmount: {
                    required: true,
                    message: '请输入拟招标金额（元）',
                    trigger: 'blur'
                },
                tenderForm: {
                    required: true,
                    message: '请输入招标方式',
                    trigger: 'blur'
                },
                projectOverview: {
                    required: true,
                    message: '请输入招标项目工程概况',
                    trigger: 'blur'
                },
                closeReason: [{
                    required: true,
                    message: '请输入关闭原因：',
                    trigger: 'blur'
                },
                { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }],
                orgName: {
                    required: true,
                    message: '请输入录入机构',
                    trigger: 'blur'
                },
                state: {
                    required: true,
                    message: '请输入状态',
                    trigger: 'blur'
                }
            },
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() > Date.now()
                }
            },
        }
    },
    computed: {
        ...mapState({
            options: state => state.biddingApplication.dictionaries
        }),
        tenderId () {
            return this.$route.query.tenderId || this.$route.query.billid
        }
    },
    components: {
        // ComTreeTable,
        // ComTreeFile,
        // ComPagination,
        ComShowBiddingButton
    },
    created () {
        ;(async () => {
            await this.tenderApplyFindById()
            this.getNowDate()
        })()
    },
    mounted () {},
    beforeDestroy () {
        this.$notify.closeAll()
    },
    methods: {
        getNowDate () {
            // 个位数前补0
            const zeroFill = function (num) {
                if (parseInt(num) < 10) {
                    num = '0' + num
                }
                return num
            }
            let nowtime = new Date()
            nowtime =
                zeroFill(nowtime.getFullYear()) +
                '-' +
                zeroFill(nowtime.getMonth() + 1) +
                '-' +
                zeroFill(nowtime.getDate())
            this.$set(this.formData, 'gmtCreate', nowtime)
            this.$set(this.formData, 'closeDate', nowtime)
        },
        selectChange (kvId, label) {
            if (label === '采购方式') {
                this.options.tenderForm.forEach(item => {
                    if (kvId === item.value) {
                        this.formData.tenderFormName = item.label
                    }
                })
            } else if (label === '币种') {
                this.options.currency.forEach(item => {
                    if (item.kvValue === kvId) {
                        this.formData.currency = item.kvKey
                    }
                })
            }
        },
        async tenderApplyFindById () {
            await applyRequest.tenderApplyFindById(this.tenderId).then(res => {
                // 表单提交信息映射基础招标信息
                const tenderData = res
                Object.keys(this.formData).forEach(formDataKey => {
                    Object.keys(tenderData).forEach(tenderDataKey => {
                        if (formDataKey === tenderDataKey) {
                            console.log(this.formData[formDataKey])
                            this.formData[formDataKey] = tenderData[tenderDataKey]
                        }
                    })
                })
                // 部分数据对应不上，需要增改
                this.formData.tenderApplyId = tenderData.billId // res的billid是招标id，新增补遗招标id是tenderApplyId
                delete this.formData.billId // 新增不需要表单的billId
                delete this.formData.workId // 新增不需要表单的workId
                this.formData.closeOrgId = tenderData.orgId
                this.formData.closeOrgName = tenderData.orgName
                this.formData.state = 0 // 状态默认为草稿
                console.log('formData', this.formData)
            })
        },
        showBidding () {
            // 客户端弹窗弹出本地页面
            openAppClient(`/biddingApplicationShow?see=true&tenderId=${this.tenderId}`, '查看招标')
        },
        noInputFocus () {
            this.$refs.noInput.blur()
        },
        submit () {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    applyCloseRequest.tenderApplyCloseCreate(this.formData).then(res => {
                        const callBack = () => {
                            this.$router.push({
                                path: './bidClosingEdit',
                                query: { billid: res }
                            })
                        }
                        const cancelCallBack = () => {
                            this.$router.push({
                                path: './biddingApplicationEdit',
                                query: {
                                    billid: this.tenderId,
                                    seat: 'close'
                                }
                            })
                        }
                        this.clientPop(
                            'suc',
                            '保存成功，是否继续？',
                            callBack,
                            null,
                            cancelCallBack
                        )
                    })
                } else {
                    return false
                }
            })
        },
        handleClose () {
            this.$router.push({
                path: './biddingApplicationEdit',
                query: {
                    billid: this.tenderId,
                    seat: 'close'
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}

.e-form {
    padding: 0 20px;
    /* .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    } */
}

.form {
    margin-top: 10px;
}

.e-table {
    background: #fff;

    /* .top {
    .left {
      padding: 20px;
      padding-top: 0px;
    }
  } */
}

.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
